import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useParams, useNavigate } from "react-router-dom";
import { addProductToCart } from "../../store/slices/cartSlice";
import {
    PhoneFill,
    FaceRecognitionOutline,
    AppstoreOutline,
} from "antd-mobile-icons";
import { Button, NavBar, List, Card, Popup, Stepper } from "antd-mobile";
import "./index.css";
export default function DetailPage() {
    const { id } = useParams();
    const navigate = useNavigate();
    const [visible, setVisible] = useState(false);
    // {"颜色":"红色","尺码":"M"}
    const [selectedSpecs, setSelectedSpecs] = useState({});
    // 根据id获取当前商品
    const { allProducts } = useSelector((state) => state.products);
    const product = allProducts.find((item) => item.id === Number(id));
    // 商品数量
    const [quantity, setQuantity] = useState(1);
    const dispatch = useDispatch();

    const handleAddToCart = () => {
        if (Object.keys(selectedSpecs).length !== product.specs.length) {
            setVisible(true);
            return;
        }
        dispatch(addProductToCart({ product, quantity, selectedSpecs }));
        setVisible(false);
        setSelectedSpecs({});
        setQuantity(1);
    };
    if (!product) {
        return (
            <div className="product-detail">
                <div className="detail-header">
                    <NavBar onBack={() => navigate(-1)}>商品详情</NavBar>
                </div>
                <div className="detail-content">
                    <p>商品不存在</p>
                </div>
            </div>
        );
    }
    return (
        <>
            <div className="product-detail">
                <div className="detail-header">
                    <NavBar onBack={() => navigate(-1)}>商品详情</NavBar>
                </div>
                <div className="detail-content">
                    <div className="product-image">
                        <img src={product?.image} alt={product?.name} />
                    </div>
                    <div className="product-info">
                        <Card>
                            <p
                                style={{
                                    fontSize: "18px",
                                    color: "#b50e03",
                                    marginBottom: "10px",
                                }}
                            >
                                ￥{product?.price}
                            </p>
                            <h3 style={{ fontSize: "18px" }}>
                                {product?.name}
                            </h3>
                        </Card>
                    </div>
                    <div className="product-specs-selector">
                        <Card>
                            <List className="spces-list">
                                <List.Item
                                    prefix="已选"
                                    onClick={() => {
                                        setVisible(true);
                                    }}
                                >
                                    规格
                                </List.Item>
                                <List.Item
                                    extra="领优惠券"
                                    prefix="优惠"
                                    onClick={() => {}}
                                >
                                    领取优惠券
                                </List.Item>
                                <List.Item prefix="服务" onClick={() => {}}>
                                    假一赔四 七天无理由
                                </List.Item>
                            </List>
                        </Card>
                    </div>
                </div>
                <div className="detail-footer">
                    <div className="footer-item">
                        <PhoneFill />
                        <span>客服</span>
                    </div>
                    <div className="footer-item">
                        <FaceRecognitionOutline />
                        <span>店铺</span>
                    </div>
                    <div className="footer-item">
                        <AppstoreOutline />
                        <span>购物车</span>
                    </div>
                    <Button
                        color="danger"
                        size="small"
                        shape="rounded"
                        onClick={() => {
                            setVisible(true);
                        }}
                    >
                        加入购物车
                    </Button>
                    <Button
                        color="warning"
                        size="small"
                        shape="rounded"
                        onClick={() => {
                            setVisible(true);
                        }}
                    >
                        立即购买
                    </Button>
                </div>
                <Popup
                    visible={visible}
                    onMaskClick={() => {
                        setVisible(false);
                    }}
                    onClose={() => {
                        setVisible(false);
                    }}
                    showCloseButton
                    bodyStyle={{
                        borderTopLeftRadius: "8px",
                        borderTopRightRadius: "8px",
                        minHeight: "40vh",
                    }}
                >
                    <div className="specs-popup">
                        <div className="spec-popup-header">
                            <img src={product?.image} alt={product?.name} />
                            <div className="spec-popup-info">
                                <div className="spec-popup-name">
                                    {product?.name}
                                </div>
                                <div className="spec-popup-price">
                                    ￥{product?.price}
                                </div>
                            </div>
                        </div>
                        <div className="spec-popup-content">
                            {product.specs &&
                                product.specs.map((spec, index) => (
                                    <div key={index} className="spec-group">
                                        <div className="spec-group-title">
                                            {spec.name}
                                        </div>
                                        <div className="spec-group-options">
                                            {spec.options.map(
                                                (option, optionIndex) => (
                                                    <div
                                                        key={optionIndex}
                                                        className={
                                                            selectedSpecs[
                                                                spec.name
                                                            ] === option
                                                                ? "spec-option active"
                                                                : "spec-option"
                                                        }
                                                        onClick={() => {
                                                            setSelectedSpecs({
                                                                ...selectedSpecs,
                                                                [spec.name]:
                                                                    option,
                                                            });
                                                        }}
                                                    >
                                                        {option}
                                                    </div>
                                                )
                                            )}
                                        </div>
                                    </div>
                                ))}
                            <div className="spec-quantity">
                                <span className="spec-quantity-label">
                                    数量
                                </span>
                                <Stepper
                                    className="spec-quantity-stepper"
                                    value={quantity}
                                    onChange={setQuantity}
                                    min={1}
                                    max={product.stock}
                                />
                            </div>
                        </div>
                        <div className="spec-popup-footer">
                            <Button
                                color="danger"
                                className="add-button"
                                size="large"
                                block
                                disabled={
                                    Object.keys(selectedSpecs).length !==
                                    product.specs.length
                                }
                                onClick={handleAddToCart}
                            >
                                加入购物车
                            </Button>
                            <Button
                                color="warning"
                                className="buy-button"
                                size="large"
                                block
                            >
                                立即购买
                            </Button>
                        </div>
                    </div>
                </Popup>
            </div>
        </>
    );
}
